<!DOCTYPE html> <!--文档类型-->
<html lang="en"> <!--使用的语言-->
<head>
  <meta charset="UTF-8"> <!--字符编码-->
      <!--浏览器兼容性-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <!--适应移动端-->
  <!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">-->
  <link rel="shortcut-">
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .clearfix::before,
  .clearfix::after{
    content: '';
    display: table;
  }
  .clearfix::after{
    clear: both;
  }

  .one{
    background-color: deepskyblue;
    width: 400px;
    height: 400px;
   /* transition: all 1s;*/ /*让所有要变化的物体用1秒*/ /*谁变化就加在谁哪里*/

  }
  .one:hover{
    width: 300px;
    height: 300px;
    background-color: orange;
    transition: all 1s;
  }
  .two{
    width: 200px;
    height: 200px;
  }
  .two:hover{
    width: 220px;
    height: 220px;
    transition: all 1s;
  }
</style>
<body>
<div class="clearfix"></div>

<div class="one">
  <div class="three">过渡:可以让物体慢慢的变大或缩小</div>
  <img src="1.jpg" class="two">
</div>
<div>骨架标签:</div>
<div>1.文档类型:HTML5</div>
<div>2.使用语言:language="en"默认是English,中文是:zh-CN</div>
<div>3.字符编码:charset="UTF-8"</div>
<div>4.浏览器兼容性:</div>
<div>5.适应移动端设备:</div>
<div>搜索引擎优化:SEO(Search Engine Optimization)</div>
<div>提高搜索引擎优化的方案</div>
<div>1.竞价排名</div>
<div>2.后缀名为html</div>
<div>3.加入语义化标签</div>
<div>3.1语义化标签主要是3种:title(网页标题标签),description(网页描述标签),keywords(网页关键字标签)</div>
<div>favicon:标题图片</div>
<div>favicon:标题图片</div>
</body>
</html>
